<template>
  <div class="forgot-container">
    <el-form ref="forgotForm" :model="forgotForm" :rules="forgotRules" class="forgot-form" auto-complete="on" label-position="left">
      <div class="title-container">
        <h3 class="title">找回密码</h3>
      </div>
      
      <div v-if="step === 1">
        <el-form-item prop="email">
          <el-input
            v-model="forgotForm.email"
            placeholder="请输入注册邮箱"
            name="email"
            type="email"
            auto-complete="on"
            prefix-icon="Message"
          />
        </el-form-item>
        
        <el-button :loading="loading" type="primary" style="width: 100%; margin-bottom: 30px;" @click.prevent="handleSendEmail">发送重置邮件</el-button>
      </div>
      
      <div v-else-if="step === 2">
        <el-form-item prop="code">
          <el-input
            v-model="forgotForm.code"
            placeholder="请输入验证码"
            name="code"
            type="text"
            auto-complete="on"
            prefix-icon="Key"
          />
        </el-form-item>
        
        <el-form-item prop="password">
          <el-input
            v-model="forgotForm.password"
            placeholder="请输入新密码"
            name="password"
            :type="passwordType"
            auto-complete="on"
            prefix-icon="Lock"
          />
          <span class="show-pwd" @click="showPwd">
            <el-icon><View v-if="passwordType === 'password'" /><Hide v-else /></el-icon>
          </span>
        </el-form-item>
        
        <el-form-item prop="confirmPassword">
          <el-input
            v-model="forgotForm.confirmPassword"
            placeholder="请确认新密码"
            name="confirmPassword"
            :type="passwordType"
            auto-complete="on"
            prefix-icon="Lock"
          />
        </el-form-item>
        
        <el-button :loading="loading" type="primary" style="width: 100%; margin-bottom: 30px;" @click.prevent="handleResetPassword">重置密码</el-button>
      </div>
      
      <div v-else>
        <div class="success-message">
          <el-icon class="success-icon"><CircleCheck /></el-icon>
          <p>密码重置成功，请返回登录页面</p>
        </div>
        <el-button type="primary" style="width: 100%; margin-bottom: 30px;" @click="goToLogin">返回登录</el-button>
      </div>
      
      <div class="tips">
        <router-link to="/login">返回登录</router-link>
      </div>
    </el-form>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { Message, Lock, View, Hide, Key, CircleCheck } from '@element-plus/icons-vue';
import { validEmail, validPassword } from '@/utils/validate';
import { sendResetPasswordEmail, resetPassword } from '@/api/user';

export default {
  name: 'ForgotPassword',
  components: {
    Message,
    Lock,
    View,
    Hide,
    Key,
    CircleCheck
  },
  setup() {
    const router = useRouter();
    const loading = ref(false);
    const passwordType = ref('password');
    const step = ref(1);
    
    const forgotForm = reactive({
      email: '',
      code: '',
      password: '',
      confirmPassword: ''
    });
    
    const validateEmail = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入邮箱'));
      } else if (!validEmail(value)) {
        callback(new Error('请输入正确的邮箱格式'));
      } else {
        callback();
      }
    };
    
    const validateCode = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入验证码'));
      } else if (value.length !== 6) {
        callback(new Error('验证码长度应为6位'));
      } else {
        callback();
      }
    };
    
    const validatePassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入密码'));
      } else if (!validPassword(value)) {
        callback(new Error('密码必须包含字母和数字，长度在8-20之间'));
      } else {
        callback();
      }
    };
    
    const validateConfirmPassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请确认密码'));
      } else if (value !== forgotForm.password) {
        callback(new Error('两次输入密码不一致'));
      } else {
        callback();
      }
    };
    
    const forgotRules = {
      email: [{ required: true, trigger: 'blur', validator: validateEmail }],
      code: [{ required: true, trigger: 'blur', validator: validateCode }],
      password: [{ required: true, trigger: 'blur', validator: validatePassword }],
      confirmPassword: [{ required: true, trigger: 'blur', validator: validateConfirmPassword }]
    };
    
    const showPwd = () => {
      passwordType.value = passwordType.value === 'password' ? '' : 'password';
    };
    
    const handleSendEmail = () => {
      loading.value = true;
      sendResetPasswordEmail({ email: forgotForm.email })
        .then(() => {
          loading.value = false;
          ElMessage({
            message: '验证码已发送到您的邮箱，请查收',
            type: 'success',
            duration: 2000
          });
          step.value = 2;
        })
        .catch(() => {
          loading.value = false;
        });
    };
    
    const handleResetPassword = () => {
      loading.value = true;
      resetPassword({
        email: forgotForm.email,
        code: forgotForm.code,
        password: forgotForm.password
      })
        .then(() => {
          loading.value = false;
          ElMessage({
            message: '密码重置成功',
            type: 'success',
            duration: 2000
          });
          step.value = 3;
        })
        .catch(() => {
          loading.value = false;
        });
    };
    
    const goToLogin = () => {
      router.push('/login');
    };
    
    return {
      forgotForm,
      forgotRules,
      loading,
      passwordType,
      step,
      showPwd,
      handleSendEmail,
      handleResetPassword,
      goToLogin
    };
  }
};
</script>

<style lang="scss" scoped>
@use '@/styles/variables.scss' as vars;

.forgot-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f2f5;
  
  .forgot-form {
    width: 400px;
    max-width: 100%;
    padding: 30px 35px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    
    .title-container {
      position: relative;
      
      .title {
        font-size: 26px;
        color: vars.$text-primary;
        margin: 0 auto 30px;
        text-align: center;
        font-weight: bold;
      }
    }
    
    .show-pwd {
      position: absolute;
      right: 10px;
      top: 7px;
      font-size: 16px;
      color: #889aa4;
      cursor: pointer;
      user-select: none;
    }
    
    .success-message {
      text-align: center;
      margin: 30px 0;
      
      .success-icon {
        font-size: 60px;
        color: vars.$success-color;
        margin-bottom: 15px;
      }
      
      p {
        font-size: 16px;
        color: vars.$text-primary;
      }
    }
    
    .tips {
      font-size: 14px;
      color: vars.$text-regular;
      text-align: center;
      
      a {
        color: vars.$primary-color;
        text-decoration: none;
        
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}
</style> 